<!-- 打印呈批单 -->
<template>
  <div class="app-container" :style="height">
    <div class="table-box-div">
    <el-button type="primary" size="medium" @click.native="doPrint">打印</el-button>
    </div>
    <section class="table-box" ref="print">
        <div class="print-title text-color">呈批件</div>
        <el-row>
          <el-col :span="8"><span class="text-color">局部编号：</span>{{form.number}}</el-col>
          <el-col :span="8"><span class="text-color">缓急：</span>{{form.pressing}}</el-col>
          <el-col :span="8"><span class="text-color">密级：</span>{{form.security}}</el-col>
        </el-row>
        <table class="print-table">
          <tr>
            <td class="text-center text-color" width="10%" rowspan="3">呈 报<br /> 处 室</td>
            <td width="50%"><span class="text-color">名 称：</span>{{form.title}}</td>
            <td width="25%" rowspan="8" style="vertical-align: top;"><span class="text-color">领导批示：</span>
            <div v-for="item in ldpsArr" :key="item.id" style="margin: 10px 0px;">
              <span>{{item.assigneeName}}：</span><span>{{item.comment}}</span>
            </div>
            </td>
          </tr>
          <tr>
            <td><span class="text-color">负 责 人：</span>{{cbcs.assigneeName}}</td>
          </tr>
          <tr>
            <td><span class="text-color">拟 稿 人：</span>{{form.applyUser}}</td>
          </tr>
          <tr>
            <td class="text-center text-color" rowspan="3">会 签<br /> 处 室</td>
            <td><span class="text-color">名 称：</span>{{form.title}}</td>
          </tr>
          <tr>
            <td><span class="text-color">负 责 人：</span>{{hqcs.assigneeName}}</td>
          </tr>
          <tr>
            <td><span class="text-color">会 签 意 见：</span>
              <div style="margin-top: 10px;">
                {{hqcs.comment}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="text-center text-color">综 合 处<br /> 核 稿</td>
            <td>{{zhchg.comment}}</td>
          </tr>
          <tr>
            <td colspan="2"><span class="text-color">标 题：</span>{{form.title}}</td>
          </tr>
        </table>
        <div class="foot-text text-color">湖南南山国家公园管理局</div>
    </section>
  </div>
</template>

<script>
  import { printApprovalDoc } from "@/api/system/approvalDocManage";
  export default{
    data(){
      return{
        height: "max-height:"+((document.documentElement.clientHeight || document.body.clientHeight)-110)+"px;overflow-y:auto",
        id: undefined,
        form: {},
        //呈报处室 == 处室负责人
        cbcsArr: [],
        cbcs: {},
        //会签处室 == 综合处负责人
        hqcsArr: [],
        hqcs: {},
        //领导批示 ==
        ldpsArr: [],
        ldps: {},
        //综合处核稿 == 综合处办公室核稿
        zhchgArr: [],
        zhchg: {},
      }
    },
    created(){
      console.log(this.$route)
      this.id = this.$route.params.id
      this.init()
    },
    methods: {
      //获取呈批件详情数据
      init(){
        if(this.id){
          printApprovalDoc({id:this.id}).then((res)=>{
            console.log(res)
            if(res.code == 200){
              this.form = res.data.bizBatchVo
              this.form['approvalProcessList'] = res.data.historicList
              //会签处室 == 综合处负责人
              this.hqcs = {}
              this.hqcsArr = []
              //呈报处室 == 处室负责人
              this.cbcsArr = []
              this.cbcs = {}
              //综合处核稿 == 综合处办公室核稿
              this.zhchgArr = []
              this.zhchg = {}
              if(res.data.historicList && res.data.historicList.length>0){
                for(var i=0;i<res.data.historicList.length;i++){
                  if(res.data.historicList[i].activityName == '综合处负责人审批'){
                    this.hqcsArr.push(res.data.historicList[i])
                  }
                  if(res.data.historicList[i].activityName == '处室负责人审批'){
                    this.cbcsArr.push(res.data.historicList[i])
                  }
                  if(res.data.historicList[i].activityName == '综合处办公室核稿'){
                    this.zhchgArr.push(res.data.historicList[i])
                  }
                  if(res.data.historicList[i].activityName == '领导审批'){
                    this.ldpsArr.push(res.data.historicList[i])
                  }
                }
              }
              if(this.hqcsArr.length>0){
                this.hqcs = this.hqcsArr[0]
              }
              if(this.cbcsArr.length>0){
                this.cbcs = this.cbcsArr[0]
              }
              if(this.zhchgArr.length>0){
                this.zhchg = this.zhchgArr[0]
              }
            }
          })
        }
      },
      //打印
      doPrint: function () {
          //打印
          this.$print(this.$refs.print);
      },
    },
  }
</script>

<style scoped>
  .table-box{
    width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-top: 20px;
  }
  .table-box-div{
    width: 600px;
    margin: 0 auto;
  }
  .table-box .print-title{
    text-align: center;
    letter-spacing: 10px;
    font-size: 26px;
    /* font-weight: 700; */
    margin-bottom: 20px;
  }
  .table-box .print-table{
    width: 100%;
    border: 1px solid #f00;
    border-collapse: collapse;
    color: #000;
  }
  .table-box .print-table tr td{
    padding: 20px 10px;
    border: 1px solid #f00;
    border-collapse: collapse;
  }
  .table-box .foot-text{
    text-align: right;
  }
  .text-color{
    color: #f00;
  }
  .text-center{
    text-align: center;
  }
</style>
